<template>
  <div>
    <p class="time-wrapper">{{hour}}h:{{minute}}m:{{second}}s</p>
  </div>
</template>

<script>
export default {
  name: 'TimeCountDown',
  data() {
    return {
      day: '0',
      hour: '0',
      minute: '0',
      second: '0',
      createdTime: null
    };
  },
  created() {
    this.createdTime = new Date();
  },
  mounted() {
    this.countTime();
  },
  methods: {
    countTime() {
      const nowDate = new Date();
      const date = nowDate - this.createdTime;
      if (date > 0) {
        this.day = this.checkedZero(Math.floor(date / 1000 / 60 / 60 / 24));
        this.hour = this.checkedZero(Math.floor((date / 1000 / 60 / 60) % 24));
        this.minute = this.checkedZero(Math.floor((date / 1000 / 60) % 60));
        this.second = this.checkedZero(Math.floor((date / 1000) % 60));
      }
      setTimeout(this.countTime, 1000);
    },
    checkedZero(number) {
      if (number < 9) {
        number = `0${number}`;
      }
      return number;
    },
  },
};
</script>

<style scoped>
.time-wrapper {
  font-size: 16px;
  font-weight: bold;
  color: #409EFF;
  line-height: 1.5em;
}
</style>